<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="张小月，Redspite，web前端简历，个人博客，web前端，前端博客">
    <meta name="description" content="WEB前端工程师——RedSpite的自学之路，个人博客知识笔记与心得记录">
    <meta name="author" content="张小月,Redspite">
    <title>点滴 » RedSpite个人学习小站</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css" type="text/css">
    <style>
        @media only screen and (max-width:1024px){
            #music{
                right: 20px;
                bottom: 20%;
            }
        }
        p{
            text-indent: 0!important;
        }
    </style>
    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?f87e415f9d1f6111b1d34c5f96927d9b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!--[if lte IE 9]>
    <script type="text/javascript">
        window.location = "http://www.xiaoyuezhang.com/error.html"
    </script>
    <![endif]-->
</head>
<body>
<div class="content">
    <div class=" container">
        <div id="music">
            <img src="image/music.png" alt="音乐">
            <audio id="myAudio" autoplay loop hidden="true">
                <source src="media/ifYou.mp3" type="audio/mpeg">
                <source src="media/ifYou.ogg" type="audio/ogg">
                Your browser does not support the audio element.
            </audio>
        </div>

        <div id="top">
            <img src="image/top.png" alt="回到顶部">
        </div>
        <div class="header-box">
            <img src="image/header.jpg" alt="我的头像">
        </div>
        <div class="center">
            <p class="myid">RedSpite</p>
        </div>
        <div class="my-sort center">
            <a href="index.html">简历</a>
            <a href="drip.html">点滴</a>
            <a href="message.html">留言</a>
        </div>
        <div id="artical">
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="3dRotate.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.19</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="3dRotate.html">纯css实现盒子 3D 旋转效果</a></p>
                            <div class="col-md-3 col-xs-9 art-img">
                                <img src="image/s17.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-7 col-xs-10 art-detail">
                                <p>平时看到动画下意识就觉得很难，出于畏惧心理老是不敢去碰，就像看到一个漂亮女生不敢上去搭讪(。。)。
                                拔过嘛，再难得东西都是禁不住你死缠烂打的（追姑娘同理 哈哈哈。。）所以现在就从头理理，这个3d效果究竟是怎么实现的。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="animate.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.15</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="animate.html">各种常见的鼠标悬停css3动画效果</a></p>
                            <div class="col-md-5 col-xs-9 art-img">
                                <img src="image/s15.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-10 col-xs-10 art-detail">
                                <p>平时需要用到的鼠标悬停效果，基本上都是css3的结合。
                                    代码就不放了，直接右键看即可。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="stars.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.14</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="stars.html">星星打分插件简易版</a></p>
                            <div class="col-md-4 col-xs-9 art-img">
                                <img src="image/s14.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-6 col-xs-10 art-detail">
                                <p>最近很怠惰呢，冬天是一个让人不想动弹的季节，我也懒得不想写简介了。
                                    总而言之言而总之就是字面上的意思，做评论的时候需要用到的星星打分。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="3dCard.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.11</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="3dCard.html">抽牌效果之banner轮播</a></p>
                            <div class="col-md-8 col-xs-9 art-img">
                                <img src="image/s11.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-10 col-xs-10 art-detail">
                                <p>banner轮播方式真的很多，这也算一种特别的轮播方式了。CSS3和JQ结合，打造超炫轮播切换效果。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="grid.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.08</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="grid.html">网格算法配合CSS3，实现多彩绚丽的图片切换效果</a></p>
                            <div class="col-md-3 col-xs-9 art-img">
                                <img src="image/s10.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-7 col-xs-10 art-detail">
                                <p>平时喜欢在网上看看同行的博客，看到一个很好看的图片切换效果，很炫酷，果断学来了~ 哈哈。
                                    这是利用4个div显示同一图片的不同区域，css控制各图片位置，进行显示与隐藏，再给图片加上transition时长，就能形成华丽的视觉效果。
                                    很多看似炫酷的效果，究其原理还是很简单的。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="mBanner.html">
                        <span class="trig"></span>
                        <span class="dates">2016.10.05</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="mBanner.html">移动端自适应banner轮播 手写</a></p>
                            <div class="col-md-6 col-xs-9 art-img">
                                <img src="image/s12.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-4 col-xs-10 art-detail">
                                <p>随着移动设备普及率越来越高，我们前端工程师现在必须掌握h5页面的书写了。
                                    手机端展示方式不需要太复杂，毕竟屏幕只有这么大嘛不是，所以能搞得花样也不多，运用最多的就是轮播了吧！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="bjq.html">
                        <span class="trig"></span>
                        <span class="dates">2016.09.22</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="bjq.html">带表情包的编辑器手写插件</a></p>
                            <div class="col-md-4 col-xs-9 art-img">
                                <img src="image/s8.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-6 col-xs-10 art-detail">
                                <p>说到文本输入，我们常用的有 textarea 还有input[type="text"]，这两位能完成基本的文本输入。
                                    可是当我们希望评论区域趣味一点，追求更高一点的时候捏，这两位就都得靠边站了，为啥？
                                    因为都不支持图片输入啊~ 如果往里面插入图片，他两是没有反应的。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="imgsize.html">
                        <span class="trig"></span>
                        <span class="dates">2016.09.21</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="imgsize.html">纯css响应式图片尺寸比例固定</a></p>
                            <div class="col-md-9 col-xs-9 art-img">
                                <img src="image/s7.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-10 col-xs-10 art-detail">
                                <p>当能用的图片是从第三方引过来，我们不能控制图片的尺寸，而且图片大小还不能写成定值的时候,似乎只剩用js动态写一条路了，初期的我也是用了这个方法。
                                    可是js写第一太麻烦不灵活，window.resize每次窗口缩放都要 运行一边代码，无疑这加重了浏览器负担。
                                    二是就算js写也是定值像素，图片会被压缩变形</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="gradients.html">
                        <span class="trig"></span>
                        <span class="dates">2016.08.01</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="gradients.html">CSS3 渐变背景色各种方向 兼容IE9+</a></p>
                            <div class="col-md-3 col-xs-9 art-img">
                                <img src="image/s1.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-7 col-xs-10 art-detail">
                                <p>在前端书写网页实际运用中，单一的背景色并不能很好地满足需要，在不使用图片资源的选择下，
                                    我们还可以使用渐变背景色使自己的页面更丰富,运用的最多的线性渐变分为：横向、纵向、对角渐变三种渐变…</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="hideScroll.html">
                        <span class="trig"></span>
                        <span class="dates">2016.07.30</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="hideScroll.html">去掉丑丑的滚动条 div仍然能滚动</a></p>
                            <div class="col-md-4 col-xs-9 art-img">
                                <img src="image/s2.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-6 col-xs-10 art-detail">
                                <p>工作的时候容易遇到这种情况：页面某一区域需要滚动，但并不想浏览器自带的滚动条出现,而各个浏览器的滚动条各不相同，宽度、颜色都不统一。为了美观，优化这些风格不一的滚动条
                                    也是前端工作中必须要做的事~</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="banner.html">
                        <span class="trig"></span>
                        <span class="dates">2016.07.26</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="banner.html">全屏自适应 热点图轮播banner简洁代码</a></p>
                            <div class="col-md-6 col-xs-9 art-img">
                                <img src="image/s3.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-10 col-xs-10 art-detail">
                                <p>从我零开始接触前端，学的第一个特效就是banner轮播。js语言和c语言有很多相似之处，所以真是庆幸大学有好好考计算机二级呀。。汗！
                                    初级小白通过自己一点一点摸索，总算写出了这个自适应大小的banner轮播图，可以无缝轮播，并自适应屏幕大小按比例缩小图片。…</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="my-artical">
                <div class="articals">
                    <div class="dotts"></div>
                    <a class="my-date" href="triang.html">
                        <span class="trig"></span>
                        <span class="dates">2016.07.25</span>
                    </a>
                    <div class="ar-container">
                        <div class="my-line"></div>
                        <div class="ar-content">
                            <p class="art-title"><a href="triang.html">纯CSS绘制三角形（各种角度）</a></p>
                            <div class="col-md-5 col-xs-9 art-img">
                                <img src="image/s4.jpg" alt="文章配图">
                            </div>
                            <div class="col-md-10 col-xs-10 art-detail">
                                <p>前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~
                                    通过改变border宽度 可以得到各种不同形状的三角形…</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="my-artical">
            <div class="articals" style="min-height: 3em;">
                <div class="dotts"></div>
            </div>
        </div>
        <p class="center beian">© RedSpite | <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">蜀ICP备16004270号</a></p>
    </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
        $(document).ready(function () {

        //头像淡入
       $(".header-box").addClass("fadein");

        //回到顶部
        $("#top").click(function () {
            $('html,body').animate({
                scrollTop: 0
            }, 700);
        });
        showScroll();
        var min_height = document.documentElement.clientHeight /2;
        function showScroll() {
            $(window).scroll(function() {
                var s = $(window).scrollTop();
                s > min_height ? $('#top').fadeIn() : $('#top').fadeOut();
            });
        }

        //音乐关闭
        $("#music").bind("click", function () {
           $(this).toggleClass("pause");
            var audio = $("#music audio")[0];
            if(audio.paused){
                audio.play();//audio.play();// 这个就是播放
            }else{
                audio.pause();// 这个就是暂停
            }
        });
    });
</script>


</body>

</html>